import React,{useRef,useEffect,useState,useMemo} from 'react'
import * as echarts from 'echarts'
export default function EchartDemo() {
  const box=useRef()
  const [list,setList]=useState([23,45,67,89,55,34,78,89,12,23,45,23])
  useEffect(()=>{
    initEchart()
  },[])
  /*
    将echarts中的option作为计算属性来定义
  */
  const option=useMemo(()=>{
    return {
        title:{
            text:'蜗牛学员2022年招生情况'
        },
        xAxis:{
            data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        },
        yAxis:{},
        series:[
           { 
              type:'bar',
              data:list
           } 
        ]
    }
  },[list])
  const initEchart=()=>{
    //初始化echarts
    const mychart=echarts.init(box.current)
    mychart.setOption(option)
  }

  return (
    <div>
        <div style={{width:'700px',height:'500px'}} ref={box}></div>
    </div>
  )
}
